<template>
  <view class="addr safety">
    <view class="content">
      <view class="item flex_b" v-for="item in list" :key="item.id">
        <view class="left flex">
          <view
            class="iconfont"
            :class="{
              'icon-weixuanzhong': item.boolDefault === 0,
              'icon-anniu_xuanzhong': item.boolDefault === 1,
            }"
            @click="setDefault(item.id)"
          >
          </view>
          <view class="warp" @click="chooseAddr(item)">
            <view class="header">
              {{ item.receiveName }} {{ item.receivePhone }}
            </view>
            <view class="address">
              {{ item.receiveArea }} {{ item.receiveAddress }}
            </view>
          </view>
        </view>
        <view class="right flex" @click="addAddress(item)">
          编辑 <view class="iconfont icon-angle-right"></view>
        </view>
      </view>
    </view>
    <view class="bottom_btn_warp">
      <!-- #ifdef MP-WEIXIN || MP-ALIPAY||MP-BAIDU||MP-TOUTIAO -->
      <view class="btn flex">
        <view class="btn_ flex_c" @click="MPAddAddress">获取收货地址</view>
        <view class="btn_ flex_c" @click="addAddress(-1)">添加收货地址</view>
      </view>
      <!-- #endif -->

      <!-- #ifndef MP-WEIXIN || MP-ALIPAY||MP-BAIDU||MP-TOUTIAO -->
      <view class="btn flex_c" @click="addAddress(-1)">添加收货地址</view>
      <!-- #endif -->
    </view>
  </view>
</template>

<script>
import { userReceiveInfoList, setDefault, saveOrUpdate } from "@/api/common";

import { getSetting, openSetting } from "@/utils/setting";
export default {
  data() {
    return {
      list: [],
      total: 0,
      pageNum: 1,
      pageSize: 20,
    };
  },
  onLoad() {
    this.userReceiveInfoList();
  },
  methods: {
    MPAddAddress() {
      getSetting().then((res) => {
        if (res["scope.address"]) {
          this.uniChooseAddr();
        } else {
          if (res["scope.address"] === false) {
            openSetting().then((res) => {
              console.log("openSetting", res);
            });
          } else {
            this.uniChooseAddr();
          }
        }
      });
    },
    uniChooseAddr() {
      uni.chooseAddress({
        success: (res) => {
          const params = {
            boolDefault: 0,
            receiveAddress: res.detailInfo,
            receiveArea: `${res.provinceName}${res.cityName}${res.countyName}`,
            receiveName: res.userName,
            receivePhone: res.telNumber,
          };
          saveOrUpdate(params).then((res) => {
            this.pageNum = 1;
            this.userReceiveInfoList();
          });
        },
      });
    },
    chooseAddr(item) {
      // #ifdef APP-NVUE
      const eventChannel = this.$scope.eventChannel; // 兼容APP-NVUE
      // #endif
      // #ifndef APP-NVUE
      const eventChannel = this.getOpenerEventChannel();
      // #endif
      eventChannel.emit("choose", item);
      this.$u.route({
        type: "back",
      });
    },
    setDefault(id) {
      setDefault({ id }).then((res) => {
        this.list.forEach((v) =>
          v.id === id ? (v.boolDefault = 1) : (v.boolDefault = 0)
        );
        this.$ShowToast({
          title: "操作成功",
          mask: false,
        });
      });
    },
    // 添加收货地址
    addAddress(item = {}, title = "新增地址") {
      uni.navigateTo({
        url: "/pages/add_address/add_address",
        events: {
          someEvent: () => {
            this.pageNum = 1;
            this.userReceiveInfoList();
          },
        },
        success: (res) => {
          res.eventChannel.emit("acceptDataFromOpenerPage", {
            data: {
              item: JSON.stringify(item),
              title,
            },
          });
        },
      });
    },
    // 获取收获地址列表
    userReceiveInfoList() {
      const { pageNum, pageSize } = this;
      userReceiveInfoList({
        pageNum,
        pageSize,
      }).then((res) => {
        this.list = res.list;
        this.total = res.total;
        this.pageNum = pageNum + 1;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.addr {
  width: 100%;
  height: 100vh;
  position: relative;
  .content {
    padding: 30upx;
    .item {
      background-color: #fff;
      border-radius: 20upx;
      padding: 20upx 30upx;
      margin-bottom: 20upx;
      .left {
        .iconfont {
          font-size: 50upx;
          margin-right: 20upx;
        }
        .icon-anniu_xuanzhong {
          color: #0083d0;
        }
        .warp {
          .header {
            font-size: 28upx;
            font-weight: 600;
          }
          .address {
            margin-top: 10upx;
          }
        }
      }
      .right {
        font-size: 32upx;
        .iconfont {
          margin-left: 15upx;
        }
      }
    }
  }
  .bottom_btn_warp {
    width: 100%;
    height: 120upx;
    padding: 0 30upx 40upx;
    position: fixed;
    left: 0;
    bottom: 0;
    .btn {
      width: 100%;
      height: 100%;
      border-radius: 40upx;
      background-color: #0083d0;
      color: #fff;
      font-size: 32upx;
      flex-wrap: 700;
      overflow: hidden;
      .btn_ {
        flex: 1;
        &:first-child {
          border-right: 2upx solid #fff;
        }
      }
    }
  }
}
</style>
